// 房型基本信息
<template>
  <div class="room">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
      <div class="information-page">
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="酒店名称">
              <el-input v-model="hotel_Name" disabled></el-input>
            </el-form-item>
            <el-form-item label="房型名称" :required="true">
              <el-input v-model="tableData.name" placeholder="请输入房型名称"></el-input>
            </el-form-item>
            <el-form-item label="床型">
              <el-select v-model="tableData.bedTypeId" placeholder="请选择">
                <el-option v-for="item in bedTypeEntities" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无窗户">
              <el-select v-model="tableData.hasWindows" placeholder="请选择">
                <el-option label="有窗户" value="1"></el-option>
                <el-option label="无窗户" value="''"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间类型">
              <el-select v-model="tableData.roomType" placeholder="请选择">
                <el-option v-for="item in dicList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间数">
              <el-input v-model="tableData.roomQuantity" placeholder="请输入房间数"></el-input>
            </el-form-item>
            <el-form-item label="楼层">
              <el-input v-model="tableData.floor" placeholder="请输入楼层"></el-input>
            </el-form-item>
          </div>
          <div class="information-right-page">
            <el-form-item label="英文名称">
              <el-input v-model="hotel_EnName" disabled></el-input>
            </el-form-item>
            <el-form-item label="房型英文名称" :required="true">
              <el-input v-model="tableData.enName" placeholder="请输入房型英文名称"></el-input>
            </el-form-item>
            <div class="input-group">
              <el-form-item label="房屋面积">
                <el-input v-model="tableData.roomAcreage" placeholder="请输入房屋面积"></el-input>
              </el-form-item>
              <el-form-item label="最多入住">
                <el-input v-model="tableData.maxCheck" placeholder="请输入最多入住"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="房型说明">
              <el-input v-model="tableData.description" placeholder="请输入房型说明" type="textarea" resize="none" :autosize="{ minRows: 5}"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div class="information-btn">
      <el-form-item>
        <el-button type="primary" @click="next" v-if="!isUpdate">下一步</el-button>
        <el-button type="primary" @click="back" v-if="!isUpdate">返回</el-button>
        <el-button type="primary" @click="next" v-if="isUpdate">保存</el-button>
        <el-button @click="back" v-if="isUpdate">关闭</el-button>
      </el-form-item>
    </div>
  </div>
</template>
<script>
import '@/public/scss/index.scss'
import { getBed, getRoomtype, addRoom, updateRoomInfo } from '@/public/js/room.js'
// import { getRoomInfo } from '@/public/js/room.js'
export default {
  data () {
    return {
      datas: [],
      bedTypeEntities: [], // 床型列表
      dicList: [], // 房间类型
      newData: {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'hotelId': this.$route.query.hotelId,
        'name': '',
        'enName': '',
        'bedTypeId': '',
        'hasWindows': '',
        'roomAcreage': '',
        'floor': '',
        'roomType': '',
        'description': '',
        'roomQuantity': '',
        'maxCheck': ''
      },
      isUpdate: false
    }
  },
  props: ['room', 'hotelName', 'hotelEnName'],
  created () {
    // 获取床型
    getBed().then(res => {
      this.bedTypeEntities = res.data.bedTypeEntities
      console.log(this.bedTypeEntities)
      res.data.bedTypeEntities.forEach(e => {
        console.log(e)
      })
    })
    // 获取房间类型
    getRoomtype('ROOM_TYPE').then(res => {
      this.dicList = res.data.dicList
    })
  },
  computed: {
    tableData () {
      this.isUpdate = !!this.room
      return this.room ? this.room : this.newData
    },
    hotel_Name () {
      return this.hotelName
    },
    hotel_EnName () {
      return this.hotelEnName
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    next () {
      // console.log(this.newData)
      if (this.isUpdate) {
        let data = {
          'hotelId': this.room.hotelId,
          'name': this.room.name,
          'enName': this.room.enName,
          'bedTypeId': this.room.bedTypeId,
          'hasWindows': this.room.hasWindows,
          'roomAcreage': this.room.roomAcreage,
          'maxCheck': this.room.maxCheck,
          'floor': this.room.floor,
          'roomType': this.room.roomType,
          'description': this.room.description,
          'roomQuantity': this.room.roomQuantity,
          'roomId': this.room.id
        }
        updateRoomInfo(data).then(res => {
          if (res.data.errCode === 0) {
           // 存储roomID
            this.$message.success('修改成功')
          }
        })
      } else {
        addRoom(this.newData).then(res => {
          
          if (res.data.errCode === 0) {
           // 存储roomID
            sessionStorage.setItem('roomId', res.data.room.id)
            this.$emit('input', 'second')
          }
        })
      }
    },
    saveForm () {
      // 区别新增还是修改
      if (this.isUpdate) {
        console.log(this.room)
      } else {
        console.log('this.newData', this.newData)
      }
    }
  },
  watch: {

  }
}
</script>
<style lang="scss" scoped>
.information-left-page {
  width: 47%;
  float: left;
}
.information-right-page {
  width: 47%;
  float: right;
}
.el-select {
  width: 100%;
}
.el-form-item {
  margin-bottom: 22px;
}
.input-group {
  clear: both;
  position: relative;
  z-index: 111;
  .el-form-item[data-v-444364f0] {
    width: 48%;
    float: left;
    &:last-child {
      float: right;
    }
  }
}

</style>
